<template>
    <div class="tab-box">
        <ul class="tab-list">
            <li v-for="(item, index) in lists" 
                class="tab-item" 
                @click="selectItem(index)"
                :class="{ active: index === selectIndex }"
                :key="title"
                >
                {{ item }}
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    emits:["titleChange"],
    props: {
        lists: {
            type: Array,
            require: true,
            default() {
                return []
            }
        }
    },
    data() {
        return {
            selectIndex: 0
        }
    },
    methods: {
        selectItem(index) {
            this.selectIndex = index
            this.$emit("titleChange",index)
        }
    }
}
</script>

<style lang="scss" scoped>
.tab-list {
    width: 300px;
    display: flex;
    justify-content: space-around;

    .tab-item {}

    .active {
        border: 1px solid #fcc;
    }
}
</style>